<template>
  <div class="container">
    <search-nav :statusBarHeight="statusBarHeight" :color="globalStyle.color2" searchType="seller-self"></search-nav>
    <div class="tabs-bar line-size order-tabs" :style="'top: '+ statusBarHeight +'px;background-color:'+globalStyle.color2+';border-bottom: 1px solid ' + globalStyle.color2+';'">
      <van-tabs :active="activeIndex" @change="tabClick" :border="false">
        <van-tab :title="item" v-for="(item, index) in orderStatusList" :key="index"></van-tab>
      </van-tabs>
    </div>
    <div class="height-39"></div>
    <!-- <div class="mar-t-10">
      <van-tabs :active="activeIndex" @change="tabClick" type="card" color="#f8c400">
        <van-tab :title="item" v-for="(item, index) in orderStatusList" :key="index"></van-tab>
      </van-tabs>
    </div> -->
    <div class="pull-refresh pad-4">
      <div v-for="(item, index) in orders" :key="index">
        <div class="order-div">
          <div class="flex mar-b-16">
            <img class="userinfo-avatar" :src="item.customerAvatar" mode="cover" />
            <label class="flex-item">{{item.customerNickname}}</label>
            <div class="font-orange" :class="'type-' + item.orderStatus">{{orderStatusMap[item.orderStatus]}}</div>
          </div>
          <div class="flex mar-b-10" v-for="(goods, goodsIndex) in item.orderGoodsList" :key="goodsIndex" @click="queryOrderInfo(item)">
            <div class="mar-r-10"><img :src="goods.goodsImageUrl" class="img-item" /></div>
            <div class="flex-item">
              <div class="goods-title mar-t--3">{{ goods.goodsTitle }}</div>
              <div class="goods-prop font-gray font-13 pad-t-8 mar-b--2">{{ goods.skuDetail }}</div>
              <div v-if="goods.memberIncome && Number(goods.memberIncome) > 0" class="income">赚{{ goods.memberIncome }}元</div>
              <div class="flex">
                <div class="font-red flex-item">¥{{goods.goodsPrice}}</div>
                <div class="font-gray align-r"> ×{{ goods.goodsNum }}</div>
              </div>
            </div>
          </div>
          <div class="flex v-align-c">
            <div class="flex-item font-gray">
              {{ item.createTime }}
            </div>
            <div class="mar-r--10">
              <span class="order-btn mar-r-10" @click="queryOrderInfo(item)">查看详情</span>
              <span v-if="item.orderStatus===1 && typeName==='实物商品' && item.deliveryType === 1" class="order-btn mar-r-10" @click="showDeliverGoods(item)">我要发货
              </span>
              <span v-if="item.orderStatus===1 && typeName==='服务商品'" class="order-btn mar-r-10" @click="showServiceGoods(item)">我要核销
              </span>
              <span v-if="(item.orderStatus===2 && typeName==='实物商品') || (item.orderStatus===3 && typeName==='实物商品')" class="order-btn mar-r-10" @click="queryExpress(item)">查看物流
              </span>
            </div>
          </div>
        </div>
      </div>
      <div class="pad-10 mar-t-10 align-c" v-if="orders.length===0">
        <img v-if="fileSpace" mode="widthFix" class="width-153 height-75 mar-t-30" :src="fileSpace + '/images/2-0-kong.png'" />
        <div class="pad-t-20 font-14 font-gray">空空如也</div>
      </div>
    </div>
    <!-- <div class="pad-30"></div> -->
    <div class="div-pop" v-if="isShowExpress" @click="isShowExpress=false">
      <div class="pad-l-20 pad-r-20">
        <div class="panel pad-20">
          <div class="flex">
            <div class="flex-item member-info">
              <div class="occupation">快递公司： {{expressInfo.expressName}}</div>
              <div class="occupation">快递单号：{{expressInfo.trackingNo}}</div>
              <div class="occupation">物流状态：{{expressInfo.expressStatus}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="div-pop" v-if="isDeliverGoods" catchtouchmove="true">
      <div class="border-radius-5 width-per-90" catchtap="true">
        <div class="panel pad-14">
          <div class="flex pad-t-5 pad-b-15">
            <div class="flex-item">
              <div class="font-16">收货人</div>
            </div>
            <div>
              <icon class="iconfont icon-shanchu4 font-16" @click="isDeliverGoods=false"></icon>
            </div>
          </div>

          <div class="pad-b-8 flex-row v-align-c">
            <div class="font-14 font-w order-col">联系人：</div>
            {{orderInfo.customerNickname}}
          </div>
          <div class="pad-b-8 flex-row v-align-c">
            <div class="font-14 font-w order-col">电话：</div>
            {{orderInfo.customerPhone}}
          </div>
          <div class="pad-b-8 flex-row v-align-c">
            <div class="font-14 font-w order-col">地址：</div>
            <div class="add-bar-line line-1">{{orderInfo.customerAddress}}</div>
          </div>
          <div class="pad-b-8">
            <div class="font-16">物流公司</div>
            <div class="flex v-align-c btn-border pad-10 font-14" @click="showExpressPicker">
              <div class="flex-item">
                <label>{{pickExpressText}}</label>
              </div>
              <div>
                <icon class="iconfont icon-xiala font-13"></icon>
              </div>
            </div>
          </div>
          <div class="pad-b-8">
            <div class="font-16">快递单号</div>
            <div class="btn-border pad-10 font-14">
              <input v-model="orderInfo.trackingNo" placeholder="请输入快递单号" />
            </div>
          </div>
          <div class="pad-b-8">
            <button class="btn-save" @click="deliverGoods">确认发货</button>
          </div>
        </div>
      </div>
    </div>
    <div class="div-pop" v-if="isServiceGoods" catchtouchmove="true">
      <div class="border-radius-5 width-per-90" catchtap="true">
        <div class="panel pad-14">
          <div class="flex pad-t-5 pad-b-15">
            <div class="flex-item">
              <div class="font-16">客户</div>
            </div>
            <div>
              <icon class="iconfont icon-shanchu4 font-16" @click="isServiceGoods=false"></icon>
            </div>
          </div>

          <div class="pad-b-8 flex-row">
            <div class="font-14 font-w">姓名：</div>
            {{orderInfo.customerNickname}}
          </div>
          <div class="pad-b-8 flex-row">
            <div class="font-14 font-w">电话：</div>
            {{orderInfo.customerPhone}}
          </div>
          <div class="pad-b-8">
            <div class="font-16">核销单号</div>
            <div class="btn-border pad-10 font-14">
              <input v-model="orderInfo.verifyCode" placeholder="请输入核销单号" />
            </div>
          </div>
          <div class="pad-b-8">
            <button class="btn-save" @click="deliverGoods">确认核销</button>
          </div>
        </div>
      </div>
    </div>
    <van-popup :show="isShowExpressPicker" position="bottom" @close="onExpressClose">
      <van-picker show-toolbar :columns="pickExpressArray" @cancel="onExpressClose" @confirm="onExpressConfirm" />
    </van-popup>
  </div>
</template>

<script>
import SearchNav from '@/components/SearchNav'
import {
  pageUserOrder
} from '@/api/personal'
import {
  doDeliverGoods
} from '@/api/shop'
import {
  getDict, listExpress
} from '@/api/common'

export default {
  components: { SearchNav },
  data() {
    return {
      statusMap: {
        '实物商品': ['全部', '待付款', '待发货', '已发货', '已收货'],
        '服务商品': ['全部', '待付款', '待服务', '已服务'],
        // '实物商品': ['全部', '待发货', '已发货', '已收货'],
        // '服务商品': ['全部', '待服务', '已服务'],
        '全部': '',
        '待付款': '0',
        '待发货': '1',
        '已发货': '2',
        '已收货': '3',
        '待服务': '1',
        '已服务': '2'
      },
      typeName: '',
      typeMap: {
        '实物商品': 10,
        '服务商品': 20
      },
      orderStatusList: [],
      activeIndex: 0,
      userInfo: {},
      orderStatusMap: {},
      orders: [],
      isShowExpressPicker: false,
      pickExpressArray: [],
      pickExpressId: '',
      pickExpressText: '请选择物流',
      isDeliverGoods: false,
      isServiceGoods: false,
      isShowExpress: false,
      orderInfo: {},
      expressInfo: {},
      currentPage: 1,
      pullLoad: {
        loading: false,
        finished: false
      },
      statusBarHeight: 0,
      globalStyle: {}
    }
  },
  onLoad() {
    // 初始化data
    Object.assign(this.$data, this.$options.data())
    this.statusBarHeight = this.$pt.getSystemInfoSync()['statusBarHeight'] + 44
  },
  mounted() {
    let getAppInfo = this.$pt.getStorageSync('appInfo')
    this.globalStyle = getAppInfo.style
    const type = this.getCurrentPage().query.type
    switch (type) {
      case 'payWait':
        // 待付款
        this.activeIndex = 1
        break
      case 'wDeliver':
        // 待发货
        this.activeIndex = 2
        break
      case 'shipped':
        // 已发货
        this.activeIndex = 3
        break
      case 'received':
        // 已收货
        this.activeIndex = 4
        break
    }
    this.typeName = '实物商品'
    this.orderStatusList = this.statusMap[this.typeName]
    this.getOrderDic()
    this.pageUserOrder()
    this.listExpress()
  },
  onReachBottom() {
    // 触底刷新
    if (!this.pullLoad.finished) {
      this.pageUserOrder()
    }
  },
  methods: {
    // typeTabClick(typeName, index) {
    //   this.orders = []
    //   this.currentPage = 1
    //   this.typeName = typeName
    //   this.orderStatusList = this.statusMap[this.typeName]
    //   this.activeIndex = 0
    //   this.pullLoad.finished = false
    //   this.pageUserOrder()
    // },
    tabClick(e) {
      this.orders = []
      this.currentPage = 1
      this.activeIndex = e.mp.detail.index
      this.pullLoad.finished = false
      this.pageUserOrder()
    },
    getOrderDic() {
      getDict('UserOrderDTO.orderStatus').then((response) => {
        if (response.isError) return
        this.orderStatusMap = response.data.orderStatus
      }).catch(() => {
      })
    },
    pageUserOrder() {
      const params = {
        memberId: this.getCustomerId,
        orderStatus: this.activeIndex === 0 ? '' : this.activeIndex - 1,
        currentPage: this.currentPage,
        orderType: this.typeMap[this.typeName],
        size: 10
      }
      this.$pt.showLoading({
        title: '加载中',
        mask: true
      })
      pageUserOrder(params).then((response) => {
        this.$pt.hideLoading()
        if (response.isError) return
        this.currentPage++
        response.data.records.forEach(item => {
          this.orders.push(item)
        })
        if (this.orders.length === 0 || this.orders.length >= response.data.total) {
          this.pullLoad.finished = true
        }
      }).catch(() => {
      })
    },
    showDeliverGoods(order) {
      this.orderInfo.trackingNo = ''
      this.orderInfo = order
      this.isDeliverGoods = true
    },
    showServiceGoods(order) {
      this.orderInfo.verifyCode = ''
      this.orderInfo = order
      this.isServiceGoods = true
    },
    deliverGoods() {
      if (!this.orderInfo.trackingNo && !this.orderInfo.verifyCode) {
        return this.$utils.showToast({ title: '请输入发货/服务信息' })
      }
      doDeliverGoods(this.orderInfo).then((response) => {
        if (response.isError) return
        if (response.code) {
          this.isDeliverGoods = false
          this.isServiceGoods = false
        }
        this.orders = []
        this.currentPage = 1
        this.pageUserOrder()
      }).catch(() => {
      })
    },
    showExpressPicker() {
      this.isShowExpressPicker = true
      this.isDeliverGoods = false
    },
    onExpressClose() {
      this.isShowExpressPicker = false
      this.isDeliverGoods = true
    },
    onExpressConfirm(e) {
      this.isShowExpressPicker = false
      this.pickExpressId = e.mp.detail.value.value
      this.pickExpressText = e.mp.detail.value.text
      this.orderInfo.expressId = this.pickExpressId
      this.isDeliverGoods = true
    },
    listExpress() {
      listExpress().then((response) => {
        if (response.isError) return
        const expressList = response.data
        this.pickExpressArray = []
        expressList.forEach(express => {
          this.pickExpressArray.push({
            text: express.expressName,
            value: express.expressId
          })
        })
      }).catch(() => {
      })
    },
    queryOrderInfo(order) {
      this.$pt.navigateTo({ url: '/pages/personal/order/detail/main?orderId=' + order.orderId })
    },
    queryExpress(order) {
      if (order.apartOrderIds.length > 1) {
        this.$pt.navigateTo({ url: `/pages/personal/order/express-view/main?orderId=${order.orderId}&orderFrom=${order.orderFrom}` })
      } else {
        this.$pt.navigateTo({ url: `/pages/personal/order/express-detail/main?orderId=${order.orderId}&orderFrom=${order.orderFrom}` })
      }
    }
  }
}
</script>

<style lang="less" scoped>
.income {
  background: #ffe1d1;
  color: #ff5a00;
  font-size: 12px;
  border-radius: 5px;
  padding: 2px 4px;
  line-height: 1;
  display: inline-block;
}
.add-bar-line {
  width: 220px;
}
.type-0 {
  color: #f94035;
}
.type-1 {
  color: #ff6600;
}
.type-2 {
  color: #409eff;
}
.type-3 {
  color: #ff6600;
}
.type-4 {
  color: #67c23a;
}
.type--10,
.type--11 {
  color: #ff6600;
}
.type--1 {
  color: #000;
}
.border-b {
  border-bottom: #e4e4e4 1px solid;
}
.order-col {
  min-width: 40px;
}
.order-div {
  background-color: #fff;
  border-radius: 5px;
  margin: 10px;
  font-size: 13px;
  padding: 10px;
}

.userinfo-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin-right: 6px;
}

.goods-prop {
  box-sizing: border-box;
  height: 29px;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  word-break: break-word;
}
.goods-title {
  height: 42px;
  font-size: 15px;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
}

.img-item {
  width: 100px;
  height: 100px;
  border-radius: 2px;
}

.order-btn {
  background-color: #fff;
  color: #999999;
  font-size: 12px;
  line-height: 1;
  display: inline-block;
  padding: 6px 12px;
  border-radius: 50px;
  border: #cccccc 1px solid !important;
}
.order-btn2 {
  border: none !important;
  background: linear-gradient(to right, #fed801, #fcc508);
  background-color: #fff;
  color: #000;
  font-size: 12px;
  line-height: 1;
  display: inline-block;
  padding: 6px 12px;
  border-radius: 50px;
}

.btn-save {
  background-color: #f8c400;
}

.btn-border {
  border: 1px solid #969896;
  border-radius: 5px;
  height: 20px;
  background-color: #ffffff;
}
</style>
